<template>
  <div class="personal_center_container">
    <!--头部区域-->
    <header-component :border="true"></header-component>

    <!--底部区域-->
    <div class="bottom_area">
      <div class="left_area">
        <!--profile区域-->
        <div @click="isShowEditAvatarDialog = true" class="profile_area">
          <div class="avatar">
            <img :src="userStore.getStoreUserInfo().avatar"/>
          </div>
          <div class="nick_name">{{ userStore.getStoreUserInfo().userName }}</div>
        </div>

        <!--tab区域-->
        <div class="tab_area">
          <div
            v-for="item in tabList"
            :class="currentTabId == item.id ? 'tab_item tab_item_s' : 'tab_item'"
            @click="tabChange(item)"
          >
            {{ item.name }}
          </div>
        </div>

        <!--退出登录按钮-->
        <div class="exit_login">
          <button @click="exitLogin">退出登录</button>
        </div>
      </div>

      <div class="right_area">
        <div class="result_box">{{ total }} Ships</div>
        <!--船舶列表区域-->
        <div class="list_area">
          <div v-for="item in myShipList" :key="item.id" class="list_item">
            <div class="ship_img">
              <img src="@/assets/home-img/ship.png"/>
            </div>
            <div class="right">
              <div>
                <div class="ship_name_box">
                  <div class="ship_name" @click="toShipDetail">
                    {{ item.code }}
                    <span class="stauts_span">
                      <DictLabel v-model="item.shipStatus" code="ship_status"></DictLabel>
                    </span>
                  </div>

                  <div>
                    <img
                      class="star"
                      src="@/assets/edit-ship/edit.png"
                      @click="toEditShop(item)"
                    />
                    <img
                      v-if="item.isCollected == '0'"
                      class="star"
                      src="@/assets/search-ship-icon/star.png"
                      @click="handleCollect(item)"
                    />
                    <img
                      v-if="item.isCollected == '1'"
                      class="star"
                      src="@/assets/search-ship-icon/star-filled.png"
                      @click="cancelCollect(item)"
                    />
                  </div>
                </div>
                <div class="info_box">
                  <div class="info_item">
                    {{ item.shipTypeName ? item.shipTypeName.split(",")[0] : "" }}
                  </div>
                  <div class="info_item">{{ item.yearOfBuild }}</div>
                  <!--                  <div class="info_item">{{ item.shipNative}}</div>-->
                  <div class="info_item">
                    <dict-label v-model="item.shipNative" code="ship_native"></dict-label>
                  </div>
                </div>
              </div>
              <div class="ship_data_box">
                <div class="ship_data_item">
                  <div class="label">Deadweight</div>
                  <div class="value">{{ item.deadWeight }} mt</div>
                </div>
                <div class="ship_data_item">
                  <div class="label">GRT / NRT</div>
                  <div class="value">{{ item.grossTonnage }} mt</div>
                </div>
                <div class="ship_data_item">
                  <div class="label">LOA</div>
                  <div class="value">{{ item.totalLength }} m</div>
                </div>
                <div class="ship_data_item">
                  <div class="label">Breadth Moulded</div>
                  <div class="value">{{ item.mouldedBreadth }} m</div>
                </div>
                <div class="ship_data_item">
                  <div class="label">Hull Depth</div>
                  <div class="value">{{ item.mouldedDepth }} m</div>
                </div>
                <div class="ship_data_item">
                  <div class="label">Loaded Draft</div>
                  <div class="value">{{ item.draft }} m</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!--修改头像区域-->
    <edit-avatar-dialog v-if="isShowEditAvatarDialog" @close="isShowEditAvatarDialog = false"></edit-avatar-dialog>
  </div>
</template>
<script setup>
import {ref, reactive} from "vue";
import router from "@/router/index.js";
import UserAPI from "@/api/user/index.js";
import {ResultEnum} from "@/enums/ResultEnum.js";
import FavoriteApi from "@/api/favorite-ship/favorites.js";
import ShipAPI from "@/api/ship/index.js";
import {useUserStore} from "@/store/index.js";

const tabList = ref([
  {id: 1, name: "My ships"},
  {id: 2, name: "My Collection"},
]);

const myShipList = ref([]);

const currentTabId = ref(1);

const total = ref(0);

const favoriteParam = reactive({
  pageNum: 1,
  pageSize: 10,
  uid: null,
});

//页面tab切换
async function tabChange(item) {
  currentTabId.value = item.id;
  let res = {};
  if (currentTabId.value == 1) {
    toGetUserShipList()
  } else if (currentTabId.value == 2) {
    res = await FavoriteApi.listFavorites({...favoriteParam});
    if (res.code === ResultEnum.SUCCESS) {
      myShipList.value = res.data;
      total.value = res.total;
    }
  }

}

function toEditShop(item) {
  router.push({
    path: "/edit-ship",
    query:{
      sid:item.sid
    }
  });
}


const userStore = useUserStore();

//退出登录
async function exitLogin() {
  const res = await UserAPI.logOut({});
  if (res.code === ResultEnum.SUCCESS) {
    userStore.clearUserInfo()
    ElMessage.success("退出登录成功");
    router.replace("/home");
  }
}


async function handleCollect(item) {
  favoriteParam.sid = item.sid;
  console.log(item, "item", {...favoriteParam})
  let res = await FavoriteApi.addFavorites({...favoriteParam});
  if (res.code == ResultEnum.SUCCESS) {
    item.isCollected = '1';
    // shipList.value = res.data.rows;
    // total.value = res.data.total;
    // console.log(s                                                                                                                                                                                                                                               hipList.value);
  }
}

//取消收藏船
async function cancelCollect(item) {
  favoriteParam.sid = item.sid;
  let res = await FavoriteApi.cancelFavorites({...favoriteParam});
  if (res.code == ResultEnum.SUCCESS) {
    item.isCollected = '0'
  }
}


//获取船东代理的船只列表
async function toGetUserShipList() {
  let res = await ShipAPI.getUserShipList({});
  if (res.code == ResultEnum.SUCCESS) {
    myShipList.value = res.rows
  }
}

toGetUserShipList()

//是否展示头像修改
const isShowEditAvatarDialog = ref(false)
</script>

<style lang="scss" scoped>
.personal_center_container {
  .bottom_area {
    display: flex;
    padding: 0 72px;
    width: 100%;

    .left_area {
      padding: 24px;

      .profile_area {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 224px;
        height: 160px;
        background-image: url("@/assets/personal-center/profile_bg.png");
        background-size: cover;
        background-repeat: no-repeat;

        .avatar {
          border: 1.33px solid #ffffff;
          margin-bottom: 8px;
          width: 64px;
          height: 64px;
          border-radius: 50%;

          img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .nick_name {
          font-size: 20px;
          font-weight: bold;
          line-height: 28px;
          text-align: center;
          color: #1c1e24;
        }
      }

      .tab_area {
        padding: 24px 24px 24px 0;
        width: 248px;
        box-sizing: border-box;

        .tab_item {
          font-size: 14px;
          line-height: 20px;
          color: #808690;
          padding: 10px 24px;
        }

        .tab_item_s {
          position: relative;
          border-radius: 8px;
          background: #e6f9f5;
          font-size: 14px;
          font-weight: bold;
          line-height: 20px;
          color: #1e90ff;
        }

        .tab_item_s::after {
          content: " ";
          position: absolute;
          border-radius: 8px;
          background: #1e90ff;
          top: 50%;
          transform: translateY(-50%);
          right: 0;
          width: 2px;
          height: 20px;
        }
      }

      .exit_login {
        button {
          width: 224px;
          border-radius: 8px;
          opacity: 1;
          background: #f0f2f7;
          color: #1c1e24;
          font-size: 14px;
          font-weight: 500;
          padding: 10px 24px;
        }
      }
    }

    .right_area {
      flex: 1;

      .result_box {
        font-size: 14px;
        font-weight: normal;
        line-height: 20px;
        color: #808690;
        margin-top: 24px;
        margin-bottom: 8px;
      }

      .list_area {
        .list_item {
          display: flex;
          padding: 16px 0;

          .ship_img {
            width: 144px;
            height: 108px;
            border-radius: 8px;
            margin-right: 16px;

            img {
              width: 100%;
              height: 100%;
              border-radius: 8px;
              object-fit: cover;
            }
          }

          .right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;

            .ship_name_box {
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 20px;
              font-weight: bold;
              line-height: 28px;
              color: #1c1e24;

              .ship_name {
                display: flex;
                align-items: center;
              }

              .stauts_span {
                padding: 4px 8px;
                z-index: 1;
                background: #d1f7d2;
                font-size: 12px;
                line-height: 16px;
                color: #3d3d3d;
                margin-left: 8px;
                border-radius: 4px;
              }

              .star {
                width: 24px;
                height: 24px;
                transition: all 0.3s ease;
                cursor: pointer;
                margin-left: 12px;

                &.loading {
                  opacity: 0.6;
                  animation: spin 1s linear infinite;
                }
              }
            }

            @keyframes spin {
              from {
                transform: rotate(0deg);
              }
              to {
                transform: rotate(360deg);
              }
            }

            .info_box {
              display: flex;
              align-items: center;
              font-size: 14px;
              line-height: 20px;
              color: #1c1e24;

              .info_item {
                position: relative;
                padding: 0 8px;
              }

              .info_item:first-child {
                padding-left: 0;
              }

              .info_item:last-child:after {
                content: "";
                display: none;
              }

              .info_item::after {
                content: " ";
                position: absolute;
                top: 50%;
                right: 0;
                transform: translateY(-50%);
                width: 1px;
                height: 12px;
                background-color: #e4e6ec;
              }
            }

            .ship_data_box {
              display: flex;
              align-items: center;
              flex-wrap: wrap;
              margin-top: 16px;

              .ship_data_item {
                min-width: 108px;
                margin-right: 8px;
                margin-bottom: 12px;

                .label {
                  font-size: 12px;
                  line-height: 16px;
                  color: #808690;
                }

                .value {
                  font-size: 14px;
                  font-weight: normal;
                  line-height: 20px;
                  color: #1c1e24;
                  margin-top: 4px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
